<html>
<head>
<style>
  body {
    margin: 0px;
    color: yellow;
    font-family: Verdana;
  }

  a {
    color:white;
    margin: 0;
    padding: 0;
  }
  
  .spinner {
    margin: 0;
    padding: 0;
    border: 0;
    width:24px;
    height: 24px;
  }

  #version-span {
    position: absolute;
    left: 125px;
    top: 10px;
    height: 24px;
    vertical-align: middle;
  }

  #help-bar {
    position: absolute;
    left: 155px;
    top: 10px;
  }

  #help-bar a {
    color: #DDD;
  }

  #sign-bar {
    position:absolute;
    left: 155px;
    top: 20px;
  }

  #sign-bar a {
    font-size: 4px;
    color: #0066CC;
  }

  .status {
    text-align: left;
    height:40px;
  }
  
  .action-log {
    height: 10px;
    font-size: 10px;
    padding: 0;
    margin-bottom: 5px;
  }
  
  .actionBar {
    text-align: center;
  }
  .actionBar input{
    margin:0;
    padding:0;
  }
  
  #infoButton {
    position:absolute;
    bottom: 18px;
    right: 12px;
  }
  #front {
    display:block;
    font-size: 12px;
    line-height: 16px;
    width: 216px;
    height: 116px;
  }
  #back {
    width: 800px;
    height: 600px;
    font-size: 16px;
    line-height:22px; 
    background-color: #500090;
    display: none;
  }
  
  .p {
    padding: 5px;
  }
</style>

<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleInfoButton.js' charset='utf-8'></script>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleAnimator.js' charset='utf-8'></script>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleButton.js' charset='utf-8'></script>

<script type='text/javascript' src='base.js' charset='utf-8'></script>
<script type='text/javascript' src='front_back_transition.js' charset='utf-8'></script>
<script type='text/javascript' src='mac_main.js' charset='utf-8'></script>

</head>
<body onload="init()">
  <div id="front">
    <img id='bg-img' src="Default.png" width="216px" height="116px"/>
    <img id='spinner-img' class='spinner' src="images/observing-spinner.gif" style="position: absolute; left: 1px;top:1px"/>
  
    <span id='version-span'></span>&nbsp;<div id='help-bar'><a href="http://code.google.com/p/ccmonitor/" target='_blank' onclick="openLink(this)" title="CC Monitor Home">Help?</a></div>
    <div id='sign-bar'><a href="http://code.google.com/p/ccmonitor/" target='_blank' onclick="openLink(this)" title="CC Monitor Home">LiXiao's pet:)</a></div>
    <div style='position: absolute; top: 28px; left: 18px; width: 180px;'>
      <div id='status-bar' class='status'></div>
      <div id='action-log-bar' class='action-log'></div>
      <div class='actionBar'>
        <input type='button' id='stop-button' value='stop' onclick="stopMonitors()"/>
        <input type='button' id='start-button' value='start' onclick="restartMonitors()"/>
        <input type='button' id='log-button' value='open log' onclick="openRuntimeLog()"/>
      </div>
      <div id='infoButton'></div>
    </div>
  </div>

  <div id="back">
    <input type='hidden' id='interval' name='interval' value='15'>
    <input type='hidden' id='configuration_source' name='configuration_source'>
    <div class='p' height='25px'>
      <input type='radio' name='monitor_selection' id='monitor_selection_uri' checked value='ccmonitor_uri'>
      <span>ccmonitor uri:</span>
      <input type='text' style='margin-left: 5px' id='ccmonitor_uri' name='ccmonitor_uri' size='83'>
      <span><input type='button' id='load_source' name='load_source' value='Load' onclick='loadCcMonitor()'></span>
    </div>
    <div class='p'>
      <div style='float:left'>
        <input type='radio' name='monitor_selection' id='monitor_selection_local' value='local_monitor'>
        <span>local monitor:</span>
      </div>
      <textarea id='local_monitor' style="height:500px; width: 100%;"  name='local_monitor'></textarea>
      <div id="doneButton" style='float: right; margin: 10px'></div>
    </div>
  </div>
</body>

</html>
